<template>
  <div id="app">
    <Header />
    <div class="app-main" :style="fixBottomStyle">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </div>
    <Player></Player>
  </div>
</template>

<script>
import Header from '@/components/Header/Header'
import Player from '@/components/Player/Player'
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: 'App',
  components: {
    Header,
    Player
  },
  setup() {
    const { state } = useStore()
    const playList = computed(() => {
      return state.play.playList
    })
    const fixBottomStyle = computed(() => {
      return playList.value.length === 0 ? { bottom: 0 } : { bottom: '60px' }
    })
    return {
      fixBottomStyle
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  .app-main {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(239, 241, 245);
  }
}
</style>
